<template>
    <div>
      <Header></Header>
      <div class="admin_main">
      	<div class="crumbs-nav">
      		<router-link to="/">首页</router-link> &gt; <span>报名详情</span>
	    </div>
	    <h2 class="admin-title">报名详情</h2>

      	<div class="admin-table">
	      	<table>
	      		<tr>
	      			<th>id</th>
	      			<th>姓名</th>
	      			<th>联系方式</th>
	      			<th>报到时间</th>
	      			<th>留言</th>
	      			<th>操作</th>
	      		</tr>
	      		<tr v-for="items in content" v-if="content!=''">
	      			<td>{{ items.id }}</td>
	      			<td>{{ items.username }}</td>
	      			<td>{{ items.phone }}</td>
	      			<td>{{ items.add_time | formatDate }}</td>
	      			<td>{{ items.message }}</td>
	      			<td>
                <router-link :to="{path: 'home_details/del' + '?id='+items.id}" v-model="items.id">删除</router-link>
	      			</td>
	      		</tr>
            <tr v-if="content==''">
              <td colspan="6">暂无报名人数</td>
            </tr>
	      	</table>
      	</div>
      </div>

    </div>
</template>

<script>
import Header from '../comments/header'
export default {
  name: 'home_details',
  components: {
    Header
  },
  data () {
    return {
      content : ''
    }
  },
  mounted () {
    this.$axios.get('/api/home_details',{params: {id: this.$route.query.id}})
      .then((res)=>{
        this.content = res.data;
      })
      .catch((err)=>{
        console.log(err);
      })
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }
  }

}
</script>
